<template lang="html">
  <div class="login-page">
    <h2>TCF贸易订单流转系统</h2>

    <!-- <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="account">
        <el-input v-model="ruleForm.account" auto-complete="off" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="passWord">
        <el-input type="passWord" v-model="ruleForm.passWord" auto-complete="off" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item class="align">
        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
      </el-form-item>
    </el-form> -->

    <ul>
      <li>
        <label for="account">用户名</label><input type="text" name="" value="" id="account">
      </li>
      <li>
        <label for="passWord">密码</label><input type="password" name="" value="" id="passWord">
      </li>
      <li>
        <el-button type="primary" @click="submitForm()">登录</el-button>
      </li>
    </ul>

    <p>忘记密码请联系管理员邮箱 <a href="" target="_blank">admin@FTL.com</a></p>
  </div>
</template>

<script>
  import {userLogin} from '@/server/user'
  import {setStore, getStore} from '@/assets/js/common'

  export default {

    data() {
      var validateUserName = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入用户名'));
        } else {
          callback();
        }
      };
      var validatePass = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };

      return {
        ruleForm: {
          account: '',
          passWord: ''
        },
        rules: {
          account: [
            { required: false, validator: validateUserName, trigger: 'blur' }
          ],
          passWord: [
            { required: false, validator: validatePass, trigger: 'blur' }
          ]
        }
      };
    },
    directives: {
      focus: {
        inserted: function (el) {
          el.focus()
        }
      }
    },
    created() {
      let _self = this;
      document.onkeydown=function(event){
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if(e && e.keyCode==13){ // enter 键
          _self.submitForm('ruleForm');
       }
     }

    },
    mounted(){
      // let _self = this;
      // setTimeout(()=>{
      //   _self.ruleForm.account = '';
      //   _self.ruleForm.passWord = '';
      // },1000)

      document.getElementById("shrink__bg").style.zIndex = "-10";
    },
    methods: {
      submitForm(formName) {
        // this.$refs[formName].validate((valid) => {
        //   if (valid) {
        //     this.userLoginFn();
        //
        //   } else {
        //     // console.log('error submit!!');
        //     return false;
        //   }
        // });
        let accountVal = document.getElementById('account').value;
        let passWordVal = document.getElementById('passWord').value;

        if (!accountVal) {
          this.$message.error('请输入用户名');
        } else if(!passWordVal){
          this.$message.error('请输入密码');
        } else {
          this.ruleForm.account = accountVal;
          this.ruleForm.passWord = passWordVal;

          this.userLoginFn();
        }
      },
      userLoginFn() {
        userLogin(this.ruleForm).then((res) => {
          try {
            if (res.code == '1') {
               let sData = res.data.datas[0];
               setStore('userMsg', sData.user);
               setStore('resources', sData.resources);

              //  this.$notify({
              //   title: '',
              //   message: '恭喜你，登录成功！',
              //   type: 'success',
              //   duration: 2000
              // });
              //
              this.$router.push('/home');
              location.reload();
            } else {
             this.$message.error(res.message);
            }
          } catch (e) {
            this.$notify({
            	title: '',
            	message: '登录失败！',
            	type: 'error',
            	duration: 2000
            });
          }
        }).catch(function (e) {
          alert('服务有误, 请稍后再试');
        });
      }
    }
  }
</script>

<style lang="sass">
  .login-page
    text-align: center
    width: 45%
    min-width: 350px
    margin: 0 auto
    position: absolute
    left: 50%
    top: 50%
    transform: translate(-50%, -50%)
    border: 1px solid #ccc
    padding: 40px
    border-radius: 4px
    ul
      width: 80%
      margin: 0 auto
      li
        padding-left: 60px
        position: relative
        margin: 20px auto
        label
          padding-right: 10px
          width: 50px
          text-align: right
          font-size: 14px
          position: absolute
          left: 0
          top: 14px
        input
          width: 100%
          border-radius: 4px
          border: 1px solid #999
          line-height: 36px
          height: 36px
          font-size: 14px
          text-indent: 4px
          transition: all .6s
          &:hover
            border-color: #d8dcc5 !important
        .border-err
          border: 1px solid red !important
    h2
      font-size: 24px
      line-height: 80px
      // margin-bottom: 40px
    button
        width: 200px
        margin: 10px 0 20px
    .align
      .el-form-item__content
        margin-left: 0 !important
    p
      a
        color: #378EE0

</style>
